<template>
	<div class="components-container">
		<split-pane split="vertical" :min-percent='16' :default-percent='16'>
			<template slot="paneL">
				<div class="left-container container-shadow">
					<departmentList @change="departmentChange" />
				</div>
			</template>
			<template slot="paneR">
				<div class="top-container container-shadow">
					<el-form label-width="6rem" :inline="true"  :model="searchFrom" class="demo-form-inline form-header">
						<el-form-item label="用户名称">
							<el-input v-model="searchFrom.userLoginName" placeholder="用户名称"></el-input>
						</el-form-item>
						<el-form-item label="姓名">
							<el-input v-model="searchFrom.userName" placeholder="姓名"></el-input>
						</el-form-item>
						<el-form-item v-if="moreSearch" label="联系电话">
							<el-input v-model="searchFrom.userPhone" placeholder="联系电话"></el-input>
						</el-form-item>
						<el-form-item v-if="moreSearch" label="电子邮箱">
							<el-input v-model="searchFrom.userEmail" placeholder="电子邮箱"></el-input>
						</el-form-item>
						<el-form-item v-if="moreSearch" label="身份证">
							<el-input v-model="searchFrom.userIdcard" placeholder="身份证"></el-input>
						</el-form-item>
						<el-form-item label="更多">
							<el-switch v-model="moreSearch" @change="moreChange">
							</el-switch>
						</el-form-item>
						<el-form-item style="float: right; margin-right: 2rem;">
							<el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
							<el-button v-permission="'system:user:insert'" type="primary" @click="addUser"><i class="el-icon-plus" />新增</el-button>
						</el-form-item>
					</el-form>
					<el-table v-loading="listLoading" max-height="650px" :data="list" stripe border fit highlight-current-row style="width: 100%;height: 80%;">
						<el-table-column v-for="item in tableColumn" :key="item.field" align="center" :label="item.title" :width="item.width">
							<template slot-scope="{row}">
								<template v-if="item.edit == 'select'">
									<el-select v-model="row[item.field]" filterable placeholder="请选择查询方式" class="filter-item">
										<el-option v-for="item in queryList" :key="item.key" :label="item.value" :value="item.key" />
									</el-select>
								</template>
								<template v-else-if="item.edit == 'input'">
									<el-input v-model="row[item.field]" class="edit-input" size="small" />
								</template>
								<template v-else-if="item.edit == 'checkBox'">
									<el-checkbox v-model="row[item.field]"></el-checkbox>
								</template>
								<template v-else>
									<span>{{ row[item.field] }}</span>
								</template>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot="header" slot-scope="scope">
								<el-input
									  size="mini"
									  placeholder="输入关键字搜索"/>
							</template>
							<template slot-scope="scope">
								<el-button icon="el-icon-edit" v-permission="'system:user:update'" type="primary" size="mini" @click="editUser(scope.$index, scope.row)">编辑</el-button>
								<el-button icon="el-icon-delete" v-permission="'system:user:delete'" size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="pageSizeChange" @current-change="currentPageChange" :current-page="page.currentPage"
					 :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
					 background>
					</el-pagination>
				</div>
			</template>
		</split-pane>
		<el-dialog destroy-on-close width="36vw" title="用户信息" :visible.sync="userAddFormVisible" center>
			<div  slot="title" class="dialog-title">
				<div class="dialog-header">
				用户信息
				</div>
			</div>
			<userEdit :userInfo="userInfo" />
			<div slot="footer" class="dialog-footer" style="border-top: 1px solid #dfe6ec ;">
				<div class="dialog-btn-top">
					<el-button type="danger" icon="el-icon-close" @click="userAddFormVisible = false">取 消</el-button>
					<el-button icon="el-icon-check" type="primary" @click="save">保 存</el-button>
				</div>
			</div>
		</el-dialog>


	</div>
</template>

<script>
	import permission from '@/directive/permission/index.js' // 权限判断指令
	import request from '@/utils/request'
	import waves from '@/directive/waves'
	import userEdit from '@/views/system/user/user-edit.vue'
	import departmentList from '@/views/system/department/department-list.vue'
	import splitPane from 'vue-splitpane'
	export default {
		name: 'userList',
		components: {
			userEdit,
			departmentList,
			splitPane
		},
		directives: {
			waves,permission
		},
		data() {
			return {
				//更多检索条件
				moreSearch: false,
				//弹窗是否可见
				userAddFormVisible: false,
				//搜索表单
				searchFrom: {
					userId: "",
					userLoginName: "",
					userPassword: "",
					userName: "",
					userPhone: "",
					userEmail: "",
					userIdcard: "",
					pageNo: 1,
					pageSize: 10
				},
				//表的下拉数据
				tableList: [],
				//正在编辑的用户信息
				userInfo: {
					userId: "",
					userLoginName: "",
					userPassword: "",
					userName: "",
					userPhone: "",
					userEmail: "",
					userIdcard: "",
					departmentCodes: "",
					userRoles: ""
				},
				//表头
				tableColumn: [{
					field: 'userLoginName',
					title: '用户名称',
				}, {
					field: 'userName',
					title: '姓名',
				}, {
					field: 'departmentNames',
					title: '所属部门',
				}, {
					field: 'userPhone',
					title: '联系电话',
				}, {
					field: 'userEmail',
					title: '电子邮箱'
				}, {
					field: 'userIdcard',
					title: '身份证'
				}],
				//查询方式列表
				listLoading: false,
				//数据列表
				list: null,
				//分页相关参数
				page: {
					pageSizes: [10, 20, 50, 100],
					pageSize: 10,
					total: 0,
					currentPage: 1
				}
			}
		},
		//页面初始化加载
		created() {
			this.getList();
		},
		methods: {

			//查询列表
			getList() {
				this.searchFrom['pageNo'] = this.page.currentPage
				this.searchFrom['pageSize'] = this.page.pageSize
				request({
					url: '/system/user/queryByPage',
					method: 'post',
					data: this.searchFrom
				}).then(response => {
					this.list = response.data.list
					this.page.total = response.data.total
					this.page.currentPage = response.data.pageNum
				})
			},
			//保存用户信息
			save() {
				var url = '/system/user/insert';
				if (this.userInfo.userId) {
					url = '/system/user/update';
				}
				request({
					url: url,
					method: 'post',
					data: this.userInfo
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.userAddFormVisible = false;
				})
			},
			//添加用户
			addUser() {
				this.userInfo = {
					userId: "",
					userLoginName: "",
					userPassword: "",
					userName: "",
					userPhone: "",
					userEmail: "",
					userIdcard: "",
					departmentCodes: "",
					userRoles: ""
				};
				this.userAddFormVisible = true;
			},
			//编辑用户
			editUser(index, row) {
				this.userInfo = {
					userId: "",
					userLoginName: "",
					userPassword: "",
					userName: "",
					userPhone: "",
					userEmail: "",
					userIdcard: "",
					departmentCodes: ""
				}
				this.userInfo = row;
				this.userAddFormVisible = true;
			},
			//删除用户
			deleteUser(index, row) {
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.confirmDelete(row)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//确认删除操作
			confirmDelete(row) {
				var url = '/system/user/delete';
				request({
					url: url,
					method: 'post',
					data: row
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.userAddFormVisible = false;
				})
			},
			//分页数量修改
			pageSizeChange(pageSize) {
				this.page.pageSize = pageSize;
				this.getList();
			},
			//页码修改
			currentPageChange(page) {
				this.page.currentPage = page;
				this.getList();
			},
			//更多查询条件
			moreChange() {
				this.searchFrom['userPhone'] = null;
				this.searchFrom['userEmail'] = null;
				this.searchFrom['userIdcard'] = null;
			},
			//部门修改
			departmentChange(checkedNodes) {
				this.searchFrom.departmentCodes = "";
				debugger
				for (var i = 0; i < checkedNodes.length; i++) {
					if (i == 0) {
						this.searchFrom.departmentCodes = checkedNodes[i].departmentCode;
					} else {
						this.searchFrom.departmentCodes += "," + checkedNodes[i].departmentCode
					}
				}
				this.getList();
			}
		}
	}
</script>
<style>
	.splitter-pane-resizer {
		background: white !important
	}


	.top-container {
		width: 100%;
		height: 90vh;
	}

	.el-row {
		margin-bottom: 10px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-pagination {
		float: right;
	}
</style>
